<template>
    <a-modal
        :title="(!currRow ? '新增' : '编辑') + '政策法规'"
        :visible="isShowModal"
        width="80%"
        :footer="null"
        dialogClass="custom-modal"
        @cancel="handleCancel"
        :maskClosable="false"
    >
        <a-form-model
            :model="form"
            ref="form"
            :labelCol="{ span: 2 }"
            :wrapperCol="{ span: 19 }"
            :rules="rules"
            :colon="false"
        >
            <a-row :gutter="10">
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="文件名称" prop="name">
                        <a-input placeholder="请输入文件名称" v-model.trim="form.name" allowClear />
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="文件类别" prop="type">
                        <a-input placeholder="请输入文件类别" v-model.trim="form.type" allowClear />
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="发布单位" prop="releaseUnit">
                        <a-input placeholder="请输入发布单位" v-model.trim="form.releaseUnit" allowClear />
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="发布时间" prop="releaseDateTime">
                        <a-date-picker placeholder="请输入发布时间" v-model.trim="form.releaseDateTime" allowClear />
                    </a-form-model-item>
                </a-col>
                <a-col :span="24" class="mb16">
                    <a-form-model-item label="内容" prop="content">
                        <div class="froala-box">
                            <froala :config="froalaConfig" style="width: 100%" v-model="form.content"></froala>
                        </div>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24">
                    <a-button type="primary" class="fr" @click="handleOk" :loading="confirmLoading">确定</a-button>
                </a-col>
            </a-row>
        </a-form-model>
    </a-modal>
</template>
<script>
import { policyRestApi } from '../../../common/api/setting'
const tool = [
    'fullscreen',
    'insertLink',
    'uploadImage',
    'uploadFile',
    //'insertImage',
    //'insertVideo',
    'undo',
    'redo',
    'clearFormatting',
    'bold',
    'italic',
    'underline',
    'strikeThrough',
    'fontFamily',
    'fontSize',
    'textColor',
    'color',
    'backgroundColor',
    'inlineStyle',
    'paragraphFormat',
    'align',
    'formatOL',
    'formatUL',
    'outdent',
    'indent',
    'quote',
    'embedly',
    'insertTable',
    'specialCharacters',
    'insertHR',
    'selectAll',
    'print',
    'spellChecker',
    'html',
    'help',
    'ChinaTab',
]

export default {
    data() {
        return {
            confirmLoading: false,
            form: {
                content: '',
                name: '',
                releaseDateTime: null,
                releaseUnit: '',
                type: '',
                infos: [],
            },
            rules: {
                name: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
                type: [{ required: true, message: '请输入文件类别', trigger: 'blur' }],
                releaseUnit: [{ required: true, message: '请输入发布单位', trigger: 'blur' }],
                releaseDateTime: [{ required: true, message: '请输入发布时间', trigger: 'blur' }],
                content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
            },
            froalaConfig: {
                language: 'zh_cn',
                // 后端必须返回这种格式{"link":"http://i.froala.com/download/c851ce49b4d7f086fa323a7818387a7797074182.png?1611043615"}
                //imageUploadURL: this.$apiReq.uoloadArticleBodyFile, // http://i.froala.com/upload
                imageUploadParams: {},
                // videoUploadURL: this.$apiReq.uoloadArticleBodyFile,
                videoMaxSize: 50 * 1024 * 1024, // 最大50M
                // requestHeaders: {
                //     pcbstoken: getStorage('token'),
                // },
                placeholderText: '请输入内容',
                height: 400,
                toolbarButtons: tool,
                toolbarSticky: false, // 操作栏是否自动吸顶 存在兼容性问题
                tabSpaces: 0,
                zIndex: 9999,
                events: {
                    initialized: () => {},
                    contentChanged: () => {},
                    focus: () => {},
                    blur: () => {},
                    destroy: () => {},
                    keyup: e => {},
                    'image.error': (error, response) => {
                        console.log(error, response, 'error, response')
                        try {
                            const { errCode, msg } = JSON.parse(response)
                            if (errCode === 401) {
                                this.$notification401(msg)
                            } else {
                                this.$message.error(msg || '服务器错误')
                            }
                        } catch (e) {
                            console.log(e, 'e')
                            this.$message.error('服务器错误')
                        }
                    },
                    'video.error': (error, response) => {
                        console.log(error, response, 'error, response')
                        if (error.code === 5) {
                            this.$message.warning('视频超过50M')
                            return
                        }
                        try {
                            const { errCode, msg } = JSON.parse(response)
                            if (errCode === 401) {
                                this.$notification401(msg)
                            } else {
                                this.$message.error(msg || '服务器错误')
                            }
                        } catch (e) {
                            console.log(e, 'e')
                            this.$message.error('服务器错误')
                        }
                    },
                },
            },
        }
    },
    components: {},
    props: {
        isShowModal: {
            required: true,
            type: Boolean,
        },
        currRow: {
            required: false,
            type: [Object, undefined],
        },
        enterpriseId: {
            required: true,
            type: String,
        },
    },
    watch: {
        isShowModal: {
            immediate: true,
            handler: function (isShowModal) {
                if (isShowModal) {
                    this.beforeShowModal()
                } else {
                    this.$refs.form && this.$refs.form.resetFields()
                }
            },
        },
    },
    beforeDestroy() {
        this.$refs.form && this.$refs.form.resetFields()
    },
    methods: {
        beforeShowModal() {
            if (this.currRow) {
                const { content, name, releaseDateTime, releaseUnit, type } = this.currRow
                Object.assign(this.form, {
                    content,
                    name,
                    releaseDateTime,
                    releaseUnit,
                    type,
                })
            }
        },
        async save() {
            const apiType = this.currRow ? 'edit' : 'add'
            const { content, name, releaseDateTime, releaseUnit, type } = this.form
            await policyRestApi[apiType]({
                content,
                name,
                releaseDateTime,
                releaseUnit,
                type,
                id: this.currRow ? this.currRow.id : '',
            })
        },
        async handleOk() {
            this.confirmLoading = true
            this.$refs.form.validate(async valid => {
                console.log(valid, 'valid')
                if (valid) {
                    this.save()
                        .then(() => {
                            this.$emit('update:isShowModal', false)
                            this.$message.success('操作成功')
                            this.$emit('updateData')
                        })
                        .catch(e => {
                            console.log(e)
                        })
                        .finally(() => {
                            this.confirmLoading = false
                        })
                } else {
                    this.confirmLoading = false
                    return false
                }
            })
        },
        handleCancel() {
            this.$emit('update:isShowModal', false)
        },
    },
}
</script>
<style scoped></style>
